<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>技术产品官网</title>
    <link href="css/reset.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

    <script src="js/jquery-3.1.0.js"></script>
    <script src="js/main.js"></script>
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <!-- header -->
    <div class="header clearfix">
      <div class="common-container">
        <div class="header-logo">
          <a href="#"></a>
          <p>新世界</p>
        </div>
        <ul class="header-nav">       
          <li class="item"><a href="#">首页</a></li>
          <li class="item"><a href="#">最新活动</a></li>
          <li class="item"><a href="#">项目介绍</a></li>
          <li class="item"><a href="#">爱心社区</a></li>
          <li class="item"><a href="#">关于我们</a></li>
          <li class="item login"><a href="#">登录</a></li>
        </ul>
      </div>
    </div>

    <div class="banner common-container">
      <div class="banner-bg">
        <img src="images/banner.jpg" alt="banner-bg">
      </div>
      <ul class="banner-text">
        <li class="banner-text1">Time of new life</li>
        <li class="banner-text2"><p class="front">新时代，年轻的人们让我们一起体验</p>
          <p class="next">新生活，享受新生活</p></li>
        <li class="banner-button"><a href="#experience">开始体验</a></li>
      </ul>
    </div>

    <!-- list -->

    <div class="list common-container clearfix">
      <div class="list_content">
        <img src="images/list_icon1.png" alt="">
        <p>打造全新世界观，让你更爱你的生活<i class="list-line"></i></p>
      </div>
      <div class="list_content">
        <img src="images/list_icon2.png" alt="">
        <p>丰富多彩的公益活动，发挥新世界的主人公意识<i class="list-line"></i></p>
      </div>
      <div class="list_content">
        <img src="images/list_icon3.png" alt="">
        <p>完善的培养机制，培养你全新的世界观<i class="list-line"></i></p>
      </div>
      <div class="list_content">
        <img src="images/list_icon4.png" alt="">
        <p>打造全新世界观，让你更爱你的生活</p>
      </div>
    </div>
    
    <!-- logo-title -->

    <div class="logo-title common-container">
      <img src="images/logo-big.png" alt="">
      <p>关于新世界，你不知道的还有什么？</p>
    </div>

    <!-- city-search -->

    <div class="city-search common-container clearfix">
      <div class="city-search-text">
        <h3>查找新世界城市活动信息<i class="h3-line"></i></h3>
        <p>每个城市的有不同的活动信息，请自主查询您所需要了解的城市</p>
      </div>
      <form class="city-search-list clearfix">
        <select class="search-items" id="province">
        </select>
        <select class="search-items" id="city">
        </select>
        <select class="search-items" id="area">
        </select>
        <a href="#search">搜&nbsp;&nbsp;&nbsp;索</a>
      </form>
    </div>

    <!-- city-activity -->

    <div class="city-activity common-container">
      <div class="activity-menu">
        <ul class="clearfix">
          <li class="menu-item">
            <div class="activity-img">
              <img src="images/activity_img1.jpg" alt="">
            </div>
            <div class="activity-info">
              <h4>北京活动</h4>
              <p class="info-name">新社区大联盟</p>
            </div>
          </li>
          <li class="menu-item active">
            <div class="activity-info">
              <h4>上海活动</h4>
              <p class="info-name">夜上海新景观探索</p>
            </div>
            <div class="activity-img">
              <img src="images/activity_img2.jpg" alt="">
            </div>
          </li>
          <li class="menu-item">
            <div class="activity-img">
              <img src="images/activity_img3.jpg" alt="">
            </div>
            <div class="activity-info">
              <h4>深圳活动</h4>
              <p class="info-name">全新海岸线观点站</p>
            </div>
          </li>
          <li class="menu-item">
            <div class="activity-img">
              <img src="images/activity_img4.jpg" alt="">
            </div>
            <div class="activity-info">
              <h4>香港活动</h4>
              <p class="info-name">奢侈消费大派送</p>
            </div>
          </li>
        </ul>
      </div>
    </div>

    <!-- newworld -->

    <div class="newworld common-container">
      <div class="newworld-logo">
        <div class="logo-img">
          <img src="images/new_world.jpg" alt="">
        </div>
        <div class="logo-info">
          <h2>新世界</h2>
          <div class="logo-text"></div>
          <p>@新世界－北京<br>2016.04.01</p>
        </div>
        <p class="img-tips"></p>
      </div>
      <div class="newworld-text">
        <div class="text-item">   
          <ul class="active">
            <li class="text-title">新世界／<span>01</span></li>
            <li class="text-content">新世界是个新世界新世界是个新世界新世界是个新世界 新世界是个新世界新世界是个新世界新世界是个新世界 新世界是个新世界新世界是个新世界新世界是个新世界 新世界是个新世界新世界是个新世界</li>
            <li class="text-more">更多详情</li>
          </ul>
          <ul>
            <li class="text-title">新世界／<span>02</span></li>
            <li class="text-content">新世界是个新世界新世界是个新世界新世界是个新世界 新世界是个新世界新世界是个新世界新世界是个新世界 新世界是个新世界新世界是个新世界新世界是</li>
            <li class="text-more">更多详情</li>
          </ul>
          <ul>
            <li class="text-title">新世界／<span>03</span></li>
            <li class="text-content">新世界是个新世界新世界是个新世界新世界是个新世界 新世界是个新世界新世界是个新世界新世界是个新世界 新世界是个新世界新世界是个新世界新世界是个新世界新世界新世界新世界   新世界是个新世界新世界是个新世界</li>
            <li class="text-more">更多详情</li>
          </ul>
        </div>
        <div class="btn-group">
          <a href="#" class="btn selected"></a>
          <a href="#" class="btn"></a>
          <a href="#" class="btn"></a>
        </div>
               
      </div>
    </div>

    <!-- newage -->

    <div class="newage common-container">
      <div class="newage-item">
        <p>新时代<br>关于爱生活的我们</p>
        <i class="p-line"></i>
        <a href="">查看更多</a>
      </div>
      <div class="newage-item nobgColor">
        <p>新时代<br>关于爱生活的我们</p>
        <i class="p-line"></i>
        <a href="">查看更多</a>
      </div>
      <div class="newage-img">
        <p class="img-tips"></p>
      </div>
    </div>
    
    <!-- volunteer -->

    <div class="volunteer common-container">
      <div class="volunteer-main">
        <div class="main-title">
          <h3>成为我们的志愿者<i class="h3-line"></i></h3> 
          <p>新世界的大家庭需要每一个爱生活的人的加入，如果你够年轻，有梦想，有激情<br>那就不要犹豫，快来加入我们，成为改变所有人生活的人 </p>
        </div>
        <div class="main-content">
          <div class="content-rule-menu">
            <div class="item">
              <h4>新世界志愿者协议</h4>
              <p>加入新世界志愿者的人员必须遵守中华人民共共和国的<br>相关法律法规，并且本着平等资源的原则 ......</p>
              <a class="more">more</a>
            </div>
            <div class="item">
              <h4>新世界志愿者权利</h4>
              <p>新世界志愿者享受新世界内部所有资源共享的权利，并且享受所在四新世界活动的优先参与资格</p>
              <a class="more">more</a>
            </div>
            <div class="item item-last">
              <h4>更多条款</h4>
              <a class="more">more</a>
            </div>
          </div>
          <div class="content-form clearfix">
            <input type="text" value="姓名">
            <input type="text" value="年龄">
            <input type="text" value="联系方式">
            <input type="text" value="联系地址">
            <textarea name="dream">请简单描述您梦想的生活</textarea>
            <input class="submit" type="button" value="提交申请">
          </div>
        </div>
      </div>
    </div>
    
    <!-- contact -->

    <div class="contact common-container">
      <ul class="contact-item">
        <li class="contact-item1">联系我们</li>
        <li class="contact-item2">为了更好的获取我们最新的产品资讯，您可以留下您的电子邮箱快速订阅我们的产品资讯<br>也可以通过以下任何方式关注我们动态</li>
        <li class="contact-item3">
          <div class="contact-form">
            <span>
              <input type="text" name="email" value="email">
            </span>
            <span>
              <a href="#submit">提交</a>     
            </span> 
          </div>
        </li>
        <li class="contact-item4"><img src="images/QQ.png" height="25" width="181" alt=""></li>
      </ul>
    </div>

    <!-- footer -->

    <div class="footer">
      <div class="common-container">
        <p>@2016新世界</p>
        <a href="#top">Back to top</a>
      </div>
    </div>
  </body>
</html>